<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标题</title>
  <style media="print">
      .page{
          margin-top: 15px;
          margin-bottom: 0;
      }
      .page2 {
          margin-top: 70px;
      }
  </style>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2052286_sfs2yt55a4e.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="css/section.css">
</head>
<body>
  <header>
    <figure>
      <img src="images/img.jpg" alt="头像">
      <figcaption>姓名</figcaption>
      <p>岗位</p>
    </figure>
  </header>
  <aside>
    <section>
      <span class="iconfont icon-information"></span>
      <h2>基本信息</h2>
      <hr>
      <div class="detail">
        <div class="icon-list"><span class="iconfont icon-phone"></span>电话</div>
        <div class="icon-list"><span class="iconfont icon-email"></span>邮箱</div>
        <div class="icon-list"><span class="iconfont icon-wechat"></span>微信</div>
        <div class="icon-list"><span class="iconfont icon-education"></span>学历</div>
      </div>
    </section>
    <section>
      <span class="iconfont icon-introduction"></span>
      <h2>技能掌握</h2>
      <hr>
      <div class="detail">
        <ul>
          <li>熟练掌握静态页面制作，能将设计稿还原成页面</li>
          <li>熟悉前后端分离技术，包括AJAX、跨域、Cookie等</li>
          <li>熟悉ES6，包括let/const/Promise/await/析构赋值</li>
          <li>了解TypeScript的使用</li>
          <li>了解Webpack的配置和优化</li>
        </ul>
      </div>
    </section>
    <section>
      <span class="iconfont icon-skills"></span>
      <h2>个人图谱</h2>
      <hr>
      <div class="detail">
        <dl class="skill-bar">
          <dt>JavaScript</dt>
          <dd><div style="width: 60%"></div></dd>
          <dt>CSS</dt>
          <dd><div style="width: 60%"></div></dd>
          <dt>ES6</dt>
          <dd><div style="width: 60%"></div></dd>
        </dl>
      </div>
    </section>
    <section class="page2">
      <span class="iconfont icon-other"></span>
      <h2>其他链接</h2>
      <hr>
      <div class="detail">
        <ul>
          <li><p class="intro"><span><a href="">个人博客</a></span></p></li>
          <li><p class="intro"><span><a href="">Github地址</a></span></p></li>
        </ul>
      </div>
    </section>
  </aside>
  <main>
    <section>
      <span class="iconfont icon-education"></span>
      <h2>教育经历</h2>
      <hr>
      <div class="detail">
        <div class="timeline">
          <h3>学校</h3>
          <p class="date">时间</p>
          <p class="intro">专业</p>
          <div class="detail">主修课程</div>
        </div>
      </div>
    </section>
    <section class="page">
      <span class="iconfont icon-project"></span>
      <h2>项目经历</h2>
      <hr>
      <div class="detail">
        <div class="timeline">
          <p class="intro"><span><a href="">项目预览</a></span></p>
          <h3>项目A</h3>
          <div class="detail">
            <ul>
              <li>介绍1</li>
              <li>介绍2</li>
              <li>介绍3</li>
            </ul>
          </div>
        </div>
        <div class="timeline">
          <p class="intro"><span><a href="">项目预览</a></span></p>
          <h3>项目B</h3>
          <div class="detail">
            <ul>
              <li>介绍1</li>
              <li>介绍2</li>
            </ul>
          </div>
        </div>
        <div class="timeline">
          <p class="intro"><span><a href="">项目预览</a></span></p>
          <h3>项目C</h3>
          <div class="detail">
            <ul>
              <li>介绍1</li>
              <li>介绍2</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="page">
      <span class="iconfont icon-experience"></span>
      <h2>工作/实习经历</h2>
      <hr>
      <div class="detail">
        <div class="timeline">
          <span class="date">时间</span>
          <h3>岗位/职责</h3>
          <p class="intro">公司</p>
          <div class="detail">
            <ul>
              <li>任务1</li>
              <li>任务2</li>
              <li>任务3</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </main>
</body>
</html>